<template>
  <view :style="{ height: '0', overflow: 'hidden'}">
    <uni-data-picker
      ref="popup"
      :popup-title="title"
      :localdata="selection"
      @change="hdChange($event.detail.value)"
    />
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const popup = ref()

// not so good
defineExpose({
  show() {
    popup.value.show()
  },
  hide() {
    popup.value.hide()
  },
})

const props = defineProps<{
  payload: string[]
  title: string
}>()

const selection = computed(() => {
  const res: any[] = []
  for (let i = 0; i < props.payload.length; i++) {
    res.push({ text: props.payload[i], value: props.payload[i] })
  }
  return res
})

const emit = defineEmits<{
  (e: 'confirm', value: string): void
  (e: 'cancel'): void
}>()

const hdChange = (i: any[]) => {
  emit('confirm', i[0].value)
}

</script>

<style scoped lang="scss">
</style>
